<template>
  <view>
    <u-loading-page :loading="pageLoading"></u-loading-page>

    <scroll-view class="" scroll-y refresher-enabled show-scrollbar :refresher-triggered="triggered"
                 @refresherrefresh="$u.throttle(onRefresherrefresh, 200)" @scrolltolower='$u.throttle(onScrolltolower,1000)'
                 :style="{height: `${screenHeight}px`}">

      <u-empty mode="list" v-if="listData.length === 0" :style="{height: `${screenHeight}px`}" />

      <view class="p-l-30 p-r-30">
        <view class="item" v-for="(item, index) in listData" :key="index" @tap="itemClick(item)">
          <view>
            <view class="name">{{item.label}}</view>
          </view>
        </view>
      </view>

    </scroll-view>
  </view>
</template>

<script>
import _ from 'lodash'

import {
  listOptions
} from '@/apis/bill/selectSettlementType'

export default {
  data() {
    return {
      searchData: {},
      screenHeight: 0,
      pageLoading: true,
      triggered: false,
      listData: [],
      pageInfo: {
        current: 1, // 当前页
        size: 10, // 每页数据条数
        sort: '', // 排序字段
        order: 'desc', // 排序方向
        total: 0 // 总数居量
      }
    }
  },
  onLoad() {
    this.initData()
  },
  onReady() {
    const sysInfo = uni.getSystemInfoSync()
    this.screenHeight = sysInfo.windowHeight
  },
  methods: {
    initData() {
      this.listPage()
    },
    listPage() {
      const params = {
        page: this.pageInfo,
        data: this.searchData
      }
      uni.showLoading({
        title: "加载中"
      })
      listOptions(params).then(res => {
        if (!res.data.flag) return
        const records = res.data.data || []
        this.listData.push(...records)
      }).finally(_ => {
        this.triggered = false
        this.pageLoading = false
        uni.hideLoading()
      })
    },
    onSearchChange() {
      this.handlerSearch()
    },
    handlerSearch: _.debounce(function() {
      this.listData = []
      this.listPage()
    }, 200),
    itemClick(row) {
      uni.$emit("on-selected-settlement-type", row)
      this.$Router.back()
    },
    onRefresherrefresh() {
      this.triggered = true
      this.listData = []
      this.listPage()
    },
    onScrolltolower() {}
  }
}
</script>

<style lang="scss" scoped>
.item {
  border-radius: 10rpx;
  background: #fff;
  padding: 30rpx;
  margin-top: 30rpx;

  .name {
    font-size: 40rpx;
  }
}
</style>
